<!--
 * @Author: your name
 * @Date: 2021-08-23 20:01:47
 * @LastEditTime: 2021-10-02 21:07:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ewshop\src\views\category\category.vue
-->
<template>
  <div>
    <NavBar>
      <template v-slot:center>商品分类</template>
    </NavBar>

    <div id="mainbox">
      <div class="ordertab">
        <van-tabs v-model="active" @click="tabClick">
          <van-tab title="销量排序"></van-tab>
          <van-tab title="价格排序"></van-tab>
          <van-tab title="评分排序"></van-tab>
        </van-tabs>
      </div>

      <van-sidebar class="leftmenu" v-model="activeKey">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item
            v-for="item in categories"
            :key="item.id"
            :title="item.name"
            :name="item.name"
          >
            <van-sidebar-item
              v-for="sub in item.children"
              :key="sub.id"
              :title="sub.name"
              @click="getGoods(sub.id)"
            />
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>

      <div class="goodslist">
        <div class="content">
          <van-card
            v-for="item in showGoods"
            :key="item.id"
            @click="itemClick(item.id)"
            :num="item.comments_count"
            :tag="item.comments_count >= 0 ? '热卖' : ' '"
            :price="item.price"
            :desc="item.updated_at"
            :title="item.title"
            :thumb="item.cover_url"
            :lazy-load="true"
          />
        </div>
      </div>
    </div>
    <BackTop @bTop="bTop" v-show="isShowBackTop"></BackTop>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
import BackTop from "components/common/backtop/BackTop";
import { ref, reactive, onMounted, computed, watchEffect, nextTick } from "vue";
import { useRouter } from "vue-router";
import { getCategroy, getCategroyGoods } from "network/categroy";
import BScroll from "better-scroll";

export default {
  components: { NavBar, BackTop },
  name: "Categroy",
  setup() {
    const router = useRouter();

    let active = ref(1);
    let activeKey = ref(0);
    let activeName = ref(1);
    let categories = ref([]);
    let item_children = ref([]);
    let isShowBackTop = ref(false);

    const init = () => {
      getCategroyGoods("sales", currentCid.value).then((res) => {
        goods.sales.list = res.goods.data;
      });
      getCategroyGoods("price", currentCid.value).then((res) => {
        goods.price.list = res.goods.data;
      });
      getCategroyGoods("comments_count", currentCid.value).then((res) => {
        goods.comments_count.list = res.goods.data;
      });
    };

    let bscroll = reactive({});

    onMounted(() => {
      getCategroy().then((res) => {
        res.categories.forEach((v) => {
          if (v.id < 25) {
            categories.value.push(v);
          }
        });
      });

      getCategroyGoods("sales", currentCid.value).then((res) => {
        goods.sales.list = res.goods.data;
        // console.log(res.goods.data);
      });

      //创建BetterScroll对象
      bscroll = new BScroll(document.querySelector(".goodslist"), {
        probeType: 3, //只要运动就触发scroll事件
        click: true, //是否允许点击
        pullUpLoad: true, //上拉加载更多
      });

      //注册滚动事件
      bscroll.on("scroll", (position) => {
        isShowBackTop.value = -position.y > 300;
      });

      //上拉加载数据，触发pullingup
      bscroll.on("pullingUp", () => {
        // console.log("上拉加载更多。。。")

        // const page = goods[currentOrder.value].page + 1;

        getCategroyGoods(currentOrder.value, currentCid.value).then((res) => {
          goods[currentOrder.value].list.push(...res.goods.data);
          goods[currentOrder.value].page += 1;
        });
        //完成上拉，数据请求完成，要将新数据展示
        bscroll.finishPullUp();

        //从新计算高度
        bscroll.refresh();
        // console.log(
        //   "内容高度" + document.querySelector(".content").clientHeight
        // );
        // console.log("当前类型：" + currentType.value + "当前页：" + page);
      });
    });

    //单前的排序条件
    const currentOrder = ref("sales");
    //数据模型
    const goods = reactive({
      sales: { page: 1, list: {} },
      price: { page: 1, list: {} },
      comments_count: { page: 1, list: {} },
    });

    //排序选项卡
    const tabClick = (index) => {
      let orders = ["sales", "price", "comments_count"];
      currentOrder.value = orders[index];

      getCategroyGoods(currentOrder.value, currentCid.value).then((res) => {
        goods[currentOrder.value].list = res.goods.data;

        nextTick(() => {
          //从新计算高度
          bscroll && bscroll.refresh();
        });
      });
      // console.log(currentCid.value);
      // console.log(currentOrder.value);
    };

    const showGoods = computed(() => {
      return goods[currentOrder.value].list;
    });

    //当前的ID
    const currentCid = ref(0);

    //通过分类得到商品
    const getGoods = (cid) => {
      currentCid.value = cid;
      init();
      // console.log(currentCid.value);
      // console.log(currentOrder.value);
    };

    //监听任何一个变量变化
    watchEffect(() => {
      nextTick(() => {
        //从新计算高度
        bscroll && bscroll.refresh();
      });
    });

    const bTop = () => {
      bscroll.scrollTo(0, 0, 500);
    };

    const itemClick = (id) => {
      router.push({ path: "/detail", query: { id } });
    };
    return {
      active,
      activeKey,
      activeName,
      categories,
      item_children,
      tabClick,
      currentOrder,
      getGoods,
      currentCid,
      goods,
      showGoods,
      bscroll,
      isShowBackTop,
      bTop,
      itemClick,
    };
  },
};
</script>

<style scoped lang="scss">
#mainbox {
  margin-top: 45px;
  display: flex;
  .ordertab {
    flex: 1;
    float: left;
    height: 44px;
    position: fixed;
    top: 45px;
    left: 130px;
    right: 0;
    line-height:50px;
    z-index: 999;
  }

  .leftmenu {
    position: fixed;
    top: 95px;
    left: 0;
    width: 130px;
    height: auto;
  }

  .goodslist {
    flex: 1;
    height: 200px;
    position: absolute;
    top: 95px;
    left: 130px;
    right: 0;
    height: 100vh;
    padding: 10px;
    text-align: left !important;
    .content {
      // padding-top: 100px;
    }
  }
}
.van-card__thumb {
  widows: 68px !important;
}
// .van-tabs__content{
//   box-sizing: content-box;
// }
</style>